<template>
	<div class='project-members'>
		<el-icon
			class="add-icon"
			size="24px"
			@click="showSearchMembers=true"
		>
			<CirclePlus />
		</el-icon>
		<div
			class="member"
			v-for="(item,i) in members"
			:key="item.memberUser.userId"
		>
			<!-- 头像 -->
			<el-avatar
				:size="50"
				:src="item.memberUser.avatarUrl || LOGO"
			/>
			<!-- 昵称 & 是否可编辑 -->
			<div class="info">
				<div class="name">{{item.memberUser.nickname || 'Aha萌新'}}</div>
				<el-radio-group
					v-model="item.editable"
					@change="updateMember(item)"
				>
					<el-radio :label="true">可编辑</el-radio>
					<el-radio :label="false">不可编辑</el-radio>
				</el-radio-group>
			</div>
			<!-- 删除按键 -->
			<el-icon
				class="delete-icon"
				@click="removeMember(item,i)"
			>
				<Delete />
			</el-icon>
			<el-icon
				class="sort-icon"
				size="26px"
				@click="sortMember(i,-1)"
			>
				<SortDown />
			</el-icon>
			<el-icon
				class="sort-icon"
				size="26px"
				@click="sortMember(i,1)"
			>
				<SortUp />
			</el-icon>
		</div>
		<SearchMember
			v-if="showSearchMembers"
			@close="showSearchMembers=false"
			@select="addMember"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Delete, SortDown, SortUp, CirclePlus } from '@element-plus/icons-vue'
import { postMember, putMember, putMembers, deleteMember } from '@/api/project'
import { LOGO } from '@/constants/index'
import type { ProjectType, CompProjectType, ProjectMemberType } from '@/modules/project'
import type { UserListItemType } from '@/modules/user'
import SearchMember from '../components/SearchMember.vue'
import { $confirm } from '@/utils/functions'

const props = defineProps<{
	projectType: ProjectType,
	project: CompProjectType
}>()

const showSearchMembers = ref(false)

const members = ref<ProjectMemberType[]>(props.project.members)

/**
 * 添加成员
 */
const addMember = (member:UserListItemType) => {
  const data = {
    nickname: member.nickname,
    avatarUrl: member.avatarUrl,
    job: '',
    editable: false,
    rank: members.value.length + 1,
    userId: member.userId
  }
  postMember({
    projectId: props.project.id,
    member: {
      memberUserId: data.userId,
      rank: data.rank,
      job: data.job,
      editable: data.editable,
    }
  })
  members.value.push({
    job: data.job,
    editable: data.editable,
    rank: data.rank,
    memberUser: member
  })
}
/**
 * 删除成员
 */
const removeMember = (member:ProjectMemberType, i:number) => {
  $confirm('确认删除该成员？', () => {
    deleteMember({
      projectId: props.project.id,
      userId: member.memberUser.userId
    })
    members.value.splice(i, 1)
  })
}
/**
 * 更新成员
 */
const updateMember = (member:ProjectMemberType) => {
  putMember({
    projectId: props.project.id,
    member: {
      memberUserId: member.memberUser.userId,
      rank: member.rank,
      editable: member.editable,
      job: member.job
    }
  })
}
/**
 * 成员排序
 */
const sortMember = (i:number, val: number) => {
  /* 首个禁止加，尾个禁止减 */
  if ((i === 0 && val === 1) || (i === members.value.length - 1 && val === -1)) {
    return
  }
  const member = members.value[ i ]
  const memberNext = members.value[ i - val ]

  members.value[ i ] = memberNext
  members.value[ i - val ] = member

  members.value.forEach((item, i) => {
    item.rank = i + 1
  })
  putMembers({
    projectId: props.project.id,
    members: members.value.map(item => {
      return {
        memberUserId: item.memberUser.userId,
        rank: item.rank,
        editable: item.editable,
        job: item.job
      }
    })
  })
  console.log(members.value)
}
</script>

<style lang="scss" scoped>
.project-members {
  position: relative;
  background-color: #ffffff;
  border-radius: $radiusMiddle;
  box-shadow: $shadow2;

  .add-icon {
    position: absolute;
    top: -37px;
    left: 100px;
    cursor: pointer;
  }

  .member {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    user-select: none;
    border-bottom: $borderLight;

    .info {
      margin: 0 20px;
    }

    .delete-icon {
      margin-right: 10px;
      cursor: pointer;

      &:hover {
        color: $red;
      }
    }

    .sort-icon {
      cursor: pointer;

      &:hover {
        color: $primary1;
      }
    }
  }
}
</style>
